<template>
	<div class="m-product">
		<div class="g-tit02">
			<h2>{{ title }}</h2>
			<p>计价单位<span>USD</span></p>
		</div>
		<div class="info">
			<h3>资产</h3>
			<div class="item">
				<span class="mar-left0">LTC</span>
				<span class="mar-left8">可用</span>
				<span class="weight">0.000000</span>
				<span>/</span>
				<span>冻结</span>
				<span class="mar-left8">0.000000</span>
				<span class="mar-left8 link">划转LTC</span>
			</div>
			<div class="item">
				<span class="mar-left0">USDT</span>
				<span class="mar-left8">可用</span>
				<span class="weight">0.000000</span>
				<span>/</span>
				<span>冻结</span>
				<span class="mar-left8">0.000000</span>
				<span class="mar-left8 link">划转USDT</span>
			</div>
		</div>
		<div class="box">
			<div class="s1">
				<div :class="['top', {'red': currentData.change.indexOf('+') < 0}]">
					<p class="last">{{ currentData.last }}</p>
					<p class="change">{{ currentData.change }}</p>
				</div>
				<div class="primary">
					<div class="row">
						<div class="item">
							<h4>美元价格</h4>
							<p>$68.39</p>
						</div>
						<div class="item">
							<h4>24h最高价</h4>
							<p>71.42</p>
						</div>
					</div>
					<div class="row">
						<div class="item">
							<h4>24h成交量</h4>
							<p>0</p>
						</div>
						<div class="item">
							<h4>24h最低价</h4>
							<p>68.25</p>
						</div>
					</div>
				</div>
				<div class="m-table01 m-table02">
					<div class="tab">
					  <el-tabs v-model="activeName">
					    <el-tab-pane label="行情" name="tab01">
					    	<div class="con">
									<div ref="echart" id="echart" class="echart"></div>
					    	</div>
					   	</el-tab-pane>
					   	<el-tab-pane label="介绍" name="tab02">
								<div class="con">
									<div class="f-content01">
										<div class="tit">
											<h3>BTC 比特币</h3>
											<span class="link">项目披露</span>
										</div>
										<div class="content">
											<el-row>
											  <el-col :span="12">
											  	<p>
											  		<span class="label">发行时间</span>
											  		<span class="val">2008-11-01</span>
											  	</p>
											  </el-col>
											  <el-col :span="12"></el-col>
											  	<p>
											  		<span class="label">发行总量</span>
											  		<span class="val">2100万BTC</span>
											  	</p>
											</el-row>
											<el-row>
											  <el-col :span="12">
											  	<p>
											  		<span class="label">流通总量</span>
											  		<span class="val">16996037</span>
											  	</p>
											  </el-col>
											  <el-col :span="12"></el-col>
											  	<p>
											  		<span class="label">众筹价格</span>
											  		<span class="val">--</span>
											  	</p>
											</el-row>
											<el-row>
											  <el-col :span="24">
											  	<p>
											  		<span class="label">官网</span>
											  		<a href="https://bitcoin.org/" class="link">https://bitcoin.org/</a>
											  	</p>
											  </el-col>
											</el-row>
											<el-row>
											  <el-col :span="24">
											  	<p>
											  		<span class="label">白皮书</span>
											  		<a href="http://www.bitcoin.org/bitcoin.pdf	" class="link">http://www.bitcoin.org/bitcoin.pdf	</a>
											  	</p>
											  </el-col>
											</el-row>
											<el-row>
											  <el-col :span="24">
											  	<p>
											  		<span class="label">介绍</span>
											  		<a href="https://support.okex.com/hc/zh-cn/articles/115001618092	" class="link">更多</a>
											  	</p>
											  </el-col>
											</el-row>
										</div>
										<div class="desc">
											<p>比特币（bitcoin）的概念最初由中本聪在2009年提出，根据中本聪的思路设计发布的开源软件以及建构其上的p2p网络。比特币是一种p2p形式的数字货币。点对点的传输意味着一个去中心化的支付系统。 与大多数货币不同，比特币不依靠特定货币机构发行，它依据特定算法，通过大量的计算产生，比特币经济使用整个p2p网络中众多节点构成的分布式数据库来确认并记录所有的交易行为，并使用密码学的设计来确保货币流通各个环节安全性。p2p的去中心化特性与算法本身可以确保无法通过大量制造比特币来人为操控币值。</p>
										</div>
									</div>
								</div>
					   	</el-tab-pane>
					  </el-tabs>
					</div>
					<div class="btns">
						<div class="g-button03">
							<i class="icon iconfont icon-K-line1"></i>
							<span>K线</span>
						</div>
						<div class="g-button03">
							<i class="icon iconfont icon-fullscreen2"></i>
							<span>全屏交易</span>
						</div>
					</div>
				</div>
			</div>
			<div class="s2">
				<div class="m-table01 m-tab03">
					<el-tabs v-model="activeName1">
				    <el-tab-pane name="tab01">
				    	<span slot="label" class="blue">买入BTC</span>
				    	<div class="con blue">
				    		<div class="item">
			    				<g-select02 
			    					title="委托类型"
										:selectList="select01List"
										@change="selectChange"
		    					></g-select02>
				    		</div>
				    		<div class="item">
				    			<g-input01
				    				type="USDK"
				    			></g-input01>
				    		</div>
				    		<div class="item">
				    			<g-input02
				    				title="数量 (USDT)"
				    			></g-input02>
				    		</div>
				    		<div class="item">
				    			<div class="g-slider01">
				    				<el-slider
								      v-model="sliderVal"
      								:step="25"
								      show-stops
								      :max="100"
								      :marks="marks"
							      >
								    </el-slider>
				    			</div>
				    		</div>
				    		<div class="item">
				    			<g-input02
				    				title="金额 (USDK)"
				    			></g-input02>
				    		</div>
				    		<div class="item">
				    			<p class="l">可买 USDT: <span>0.0000</span></p>
				    			<p class="r">USDK余额: <span>0.0000</span></p>
				    		</div>
				    		<div class="item">
				    			<div class="g-button04">
  									<el-button type="primary" round>买入USDT</el-button>
				    			</div>
				    			<div class="r">
						    		<el-tooltip class="item g-tip01" effect="dark" content="挂单成交0.2%，吃单成交0.2%" placement="bottom">
								      <span class="tip">费率标准</span>
								    </el-tooltip>
								  </div>
				    		</div>
				    	</div>
				   	</el-tab-pane>
				   	<el-tab-pane name="tab02">
				    	<span slot="label" class="red">卖出BTC</span>
				    	<div class="con red">
				    		<div class="item">
			    				<g-select02 
			    					title="委托类型"
										:selectList="select01List"
										@change="selectChange"
		    					></g-select02>
				    		</div>
				    		<div class="item">
				    			<g-input01
				    				type="USDK"
				    			></g-input01>
				    		</div>
				    		<div class="item">
				    			<g-input02
				    				title="数量 (USDT)"
				    			></g-input02>
				    		</div>
				    		<div class="item">
				    			<div class="g-slider01">
				    				<el-slider
								      v-model="sliderVal1"
      								:step="25"
								      show-stops
								      :max="100"
								      :marks="marks"
							      >
								    </el-slider>
				    			</div>
				    		</div>
				    		<div class="item">
				    			<g-input02
				    				title="金额 (USDK)"
				    			></g-input02>
				    		</div>
				    		<div class="item">
				    			<p class="l">可买 USDT: <span>0.0000</span></p>
				    			<p class="r">USDK余额: <span>0.0000</span></p>
				    		</div>
				    		<div class="item">
				    			<div class="g-button04">
  									<el-button type="primary" round>买入USDT</el-button>
				    			</div>
				    			<div class="r">
						    		<el-tooltip class="item g-tip01" effect="dark" content="挂单成交0.2%，吃单成交0.2%" placement="bottom">
								      <span class="tip">费率标准</span>
								    </el-tooltip>
								  </div>
				    		</div>
				    	</div>
				   	</el-tab-pane>
			   	</el-tabs>
				</div>
			</div>
			<div class="s3">
				<!-- m-depth -->
				<div class="m-depth">
					<div class="top">
						<h3>深度合并</h3>
						<g-select03
							:select="select02List"
						>
						</g-select03>
					</div>
					<!-- m-table03 -->
					<div class="m-table03">
						<div class="tit">
							<p class="left">价格(<em>USDK</em>)</p>
							<p class="right">价格(<em>USDT</em>)</p>
						</div>
						<div class="table">
							<div 
									:class="['current','ptop',new Number(tableList.current) >= 1? 'red':'blue']"
									v-if="currentShow == 1"
								>
								<p class="left">
									<em>{{ tableList.current }}</em>
									<i 
										class="icon el-icon-bottom"
										v-if="new Number(tableList.current) >= 1"
									></i>
									<i 
										class="icon el-icon-top"
										v-else
									></i>
								</p>
								<p 
									class="right"
									@click="goBack"
								>返回盘口</p>
							</div>
							<div 
									:class="['current','pbottom',new Number(tableList.current) >= 1? 'red':'blue']"
									v-if="currentShow == 2"
								>
								<p class="left">
									<em>{{ tableList.current }}</em>
									<i 
										class="icon el-icon-bottom"
										v-if="new Number(tableList.current) >= 1"
									></i>
									<i 
										class="icon el-icon-top"
										v-else
									></i>
								</p>
								<p 
									class="right"
									@click="goBack"
								>返回盘口</p>
							</div>
							<div 
								class="scroll"
								@scroll="tableScroll"
								ref="scroll"
							>
								<div 
									v-for="(item,index) of tableList.down"
									class="tr red"
								>
									<p class="left">{{item.left}}</p>
									<p class="right">{{item.right}}</p>
								</div>
								<div 
									:class="['current',new Number(tableList.current) >= 1? 'red':'blue']"
									ref="tableCurrent"
								>
									<p class="left">
										<em>{{ tableList.current }}</em>
										<i 
											class="icon el-icon-bottom"
											v-if="new Number(tableList.current) >= 1"
										></i>
										<i 
											class="icon el-icon-top"
											v-else
										></i>
									</p>
								</div>
								<div 
									v-for="(item,index) of tableList.up"
									class="tr blue"
								>
									<p class="left">{{item.left}}</p>
									<p class="right">{{item.right}}</p>
								</div>
							</div>
						</div>
					</div>
					<!-- m-table03 end -->
				</div>
				<!-- m-depth end -->
			</div>
		</div>
	</div>
</template>

<script>
	import gSelect02 from "@/components/gSelect02"
	import gSelect03 from "@/components/gSelect03"
	import gInput01 from "@/components/gInput01"
	import gInput02 from "@/components/gInput02"
	export default {
		name: "Prduct",
		data() {
			return {
				title: "BTC/USDT",
				currentData: {
					last: "68.51",
					change: "-3.07%"
				},
				activeName: "tab01",
				activeName1: "tab01",
				select01: "",
				select01List: [
					{
						label: "限价委托",
						value: "option01",
						desc: "比特币（bitcoin）的概念最初由中本聪在2009年提出，根据中本聪的思路设计发布的开源软件以及建构其上的p2p网络。比特币是一种p2p形式的数字货币。点对点的传输意味着一个去中心化的支付系统。 与大多数货币不同，比特币不依靠特定货币机构发行，它依据特定算法，通过大量的计算产生，比特币经济使用整个p2p网络中众多节点构成的分布式数据库来确认并记录所有的交易行为，并使用密码学的设计来确保货币流通各个环节安全性。p2p的去中心化特性与算法本身可以确保无法通过大量制造比特币来人为操控币值。" 
					},
					{
						label: "限价委托",
						value: "option02",
						desc: "比特币（bitcoin）的概念最初由中本聪在2009年提出，根据中本聪的思路设计发布的开源。" 
					},
				],
				sliderVal: 0,
				sliderVal1: 0,
				marks: {
					0: '0%',
					100: '100%'
				},
				select02: "",
				select02List: [
					"4位小数",
					"2位小数",
					"0位小数",
				],
				tableList: {
					down: [
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},

						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
						{
							left: '1.0100',
							right: '11,333.920' 
						},
					],
					current: "1.0057",
					up: [
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
						{
							left: '0.9100',
							right: '11,333.920' 
						},
					]
				},
				currentShow: 0
			}
		},
		components: {
			gSelect02,
			gInput01,
			gInput02,
			gSelect03
		},
		mounted(){
			this.drawEChart();
		},
		methods: {
			selectChange(val){
				this.select01 = val;
			},
			drawEChart() {
				console.log(this.echarts);
				let myChart = this.echarts.init(this.$refs.echart);
				// 随机数据
				function randomData() {
			    now = new Date(+now + oneDay);
			    value = value + Math.random() * 21 - 10;
			    return {
		        name: now.toString(),
		        value: [
		            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'),
		            Math.round(value)
		        ]
			    }
				}

				var data = [];

				var now = +new Date(1997, 9, 3);
				var oneDay = 24 * 3600 * 1000;
				var value = Math.random() * 1000;
				for (var i = 0; i < 1000; i++) {
				    data.push(randomData());
				}
        // 指定图表的配置项和数据
        let option = {
			    tooltip: {
						trigger: 'axis',
						formatter: function (params) {
						  params = params[0];
						  return '时间:' + params.value[0] + '<br />' + '价格:' + params.value[1];
						},
	        	//触发类型：坐标轴触发
	        	trigger: 'axis',
            backgroundColor:'rgba(238, 244, 253, 0.9)',//通过设置rgba调节背景颜色与透明度
            color:'black',
            padding: 8,
            borderWidth:'0',
            borderRadius: 4,
            textStyle:{
            	fontSize: 12,
            	color:'rgb(48, 117, 238)',
            },
						axisPointer: {
						  animation: false
						}
					},
					grid: {
						show: false,
					  right: '5%',
					  left: '8%',
					  top: '5%',
					  bottom: '10%'
					},
					xAxis: {
						type: 'time',
						splitLine: {
						  show: false
						},
						axisTick: {
							show: false
						},
						axisLine:{
              lineStyle:{
                color:'rgba(0,0,0,0.05)'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(0,0,0,0.45)"   //这里用参数代替了
              }
            },   

					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, 0],
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(0,0,0,0.45)"   //这里用参数代替了
              }
            }, 
						splitLine: {
						  show: false
						},
						axisTick: {
            	show: false
        		},
						axisLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						lineStyle: {
							color: "#3075ee",
							width: 1,	
						},
						showSymbol: false,
						hoverAnimation: false,
						data: data
					}]
				};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
			},
			// 返回盘口
			goBack() {

			},
			tableScroll(e) {
				let target = e.target;
				let stop = target.scrollTop;  
				let tableCurrent = this.$refs.tableCurrent;
				let tableCurrentHeight = tableCurrent.clientHeight;
				let offsetTop = tableCurrent.offsetTop;
				var scrollHeight = this.$refs.scroll.clientHeight;

				this.currentShow = 0;
				if(stop > offsetTop){
					// 1： 顶部
					this.currentShow = 1;
				}else if(stop + scrollHeight - tableCurrentHeight < offsetTop){
					// 2： 底部
					this.currentShow = 2;
				}

			},
			// 跳转页面
			// obj: 跳转页面的参数
			goto(obj) {
				this.$router.push(obj);
			}
		}
	}
</script>

<style>
</style>
